.template-drawer {
    .el-drawer__body {
        padding: 0;
    }
    .content-wrap {
        height: 100%;
        border-bottom: 1px solid var(--edit-border-color);
        .content-tabs {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            height: 100%;
            .el-tabs__header {
                margin: 0;
                .el-tabs__nav {
                    padding: 0 10px;
                    .el-tabs__item {
                        height: 55px;
                        line-height: 55px;
                    }
                }
            }
            .el-tabs__content {
                height: 100%;
                .el-tab-pane {
                    height: 100%;
                }
            }
            .content-tabs-pane {
                display: flex;
                height: 100%;
                .left-wrap {
                    width: 150px;
                    border-right: 1px solid var(--edit-border-color);
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    .left-header {
                        border-bottom: 1px solid var(--edit-border-color);
                        background-color: var(--edit-bg-color);
                        .add-category-btn {
                            display: flex;
                            align-items: center;
                            height: 56px;
                            padding: 0 20px;
                            cursor: pointer;
                            .el-icon {
                                margin-right: 5px;
                            }
                        }
                    }
                    .el-menu {
                        border: none;
                        .el-menu-item {
                            &.is-active {
                                position: relative;
                                background-color: var(--edit-color-primary-light-9);
                                &:after {
                                    content: '';
                                    position: absolute;
                                    top: 0;
                                    bottom: 0;
                                    right: 0;
                                    border-right: 2px solid var(--edit-color-primary);
                                }
                            }
                        }
                    }
                    .category-item {
                        position: relative;
                        width: 100%;
                        padding-right: 0;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        &:hover {
                            .category-tools {
                                display: block;
                            }
                        }
                        .category-title {
                            width: 55%;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                        }
                        .category-tools {
                            display: none;
                            .el-icon {
                                cursor: pointer;
                                &:hover {
                                    color: var(--edit-color-primary);
                                }
                            }
                        }
                    }
                }
                .right-wrap {
                    width: calc(100% - 150px);
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    background-color: var(--edit-custome-background-color-2);
                    .right-header {
                        padding: 10px;
                        border-bottom: 1px solid var(--edit-border-color);
                        background-color: var(--edit-bg-color);
                    }
                    .template-list {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        .template-list-column {
                            display: inline-block;
                            width: 50%;
                        }
                        .template-item {
                            padding: 10px;
                            box-sizing: border-box;
                            cursor: pointer;
                            &.active {
                                .template-item-image {
                                    outline: 2px solid var(--edit-color-primary);
                                }
                                .template-item-title {
                                    color: var(--edit-color-primary);
                                }
                            }
                            &:hover {
                                .template-item-image {
                                    outline: 2px solid var(--edit-color-primary);
                                }
                                .template-item-title {
                                    color: var(--edit-color-primary);
                                }
                                .template-item-image .template-item-tools {
                                    display: block;
                                }
                            }
                            .template-item-image {
                                position: relative;
                                border: 1px solid var(--edit-border-color);
                                .el-image {
                                    width: 100%;
                                    height: 100%;
                                    min-height: 120px;
                                    vertical-align: top;
                                    .picture-image-slot {
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        width: 100%;
                                        height: 100%;
                                        color: #909399;
                                        font-size: 14px;
                                        border-radius: inherit;
                                    }
                                }
                                .template-item-tools {
                                    display: none;
                                    position: absolute;
                                    left: 0;
                                    right: 0;
                                    bottom: 0;
                                    .tools-item {
                                        display: flex;
                                        justify-content: center;
                                        text-align: center;
                                        color: var(--edit-color-white);
                                        font-size: 12px;
                                        background-color: rgba(0, 0, 0, 0.4);
                                        & + .tools-item {
                                            border-top: 1px solid var(--edit-border-color-light);
                                        }
                                        .tools-item-btn {
                                            flex: 1;
                                            padding: 2px 0;
                                            &:hover {
                                                background-color: rgba(0, 0, 0, 0.6);
                                            }
                                            & + .tools-item-btn {
                                                border-left: 1px solid var(--edit-border-color-light);
                                            }
                                        }
                                    }
                                }
                            }
                            .template-item-title {
                                text-align: center;
                                color: var(--edit-text-color-regular);
                                margin-top: 5px;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                            }
                        }
                    }
                    .no-data-txt {
                        width: 100%;
                        color: var(--edit-color-info);
                        text-align: center;
                        margin: 20px 0;
                    }
                }
            }
        }
    }
    .footer-wrap {
        text-align: center;
    }
}

.collection-template-content {
    display: flex;
    align-items: center;
    .left-wrap {
        margin-right: 10px;
    }
    .right-wrap {
        // 
    }
}